<template>
    <div style="display:flex">
        <el-select v-model="model.powerId" filterable placeholder="请选择供电单位，单选" clearable @change="changePower">
            <el-option v-for="item in props.powerSupplyIdList" :key="item.value" :value="item.value" :label="item.label">

            </el-option>
        </el-select>
        <el-select   v-model="model.lineId" filterable placeholder="请选择供电线路，单选" clearable @change="changLine">
            <el-option v-for="item in lineIdList" :key="item.value" :value="item.value" :label="item.label">

            </el-option>
        </el-select>

    </div>
</template>
  
<script lang="ts" setup>
import { lineService } from '@/api/line'
const props = defineProps({
    form: {
        type: Object,
    },
    item: {
        type: Object,
    },
    width: {
        type: String,
        default: '120px',
    },
    powerSupplyIdList: {
        type: Object,
    },

})
const emit = defineEmits(['change'])
const model = ref({ ...props.item })
const lineIdList = ref([]);
watch(
    () => props.item,
    (val) => {
        model.value = { ...val }

    }
)
const getLineList = () => {
    lineService.getLineList({ data: { powerId: model.value.powerId } }).then((res) => {
        lineIdList.value = res.data.map((n) => {
            return {
                label: n.lineName,
                value: n.lineId
            }
        })
    })
}
const changePower = () => {
    console.log('changePower', model.value)
    if (model.value.powerId) {
        model.value.lineId = '';
    }
    emit('change',model.value)
    getLineList();
}
const changLine=()=>{
    emit('change',model.value)
}

const handleChange = (e, i) => {

}
onMounted(() => {
    getLineList();
})
</script>
  
<style lang="less" scoped></style>
  